$(function () {
    var layer = layui.layer;
    var form = layui.form;
    var laypage = layui.laypage;

    //----------------------------------------------------------------
    form.verify({
        repair: [/^[\S]{1,60}$/, '最大输入字符为60位，且不能出现空格']
    });
    //----------------------------------------------------------------
    //  页面查询参数
    var query = {
        pagenum: 1, //页码值
        pagesize: 8, //每页显示几条数据
        device_name: '', //名称
        device_serial: '', //序列号
        applicat_name: '', //借用人
    }
    // 渲染分页功能
    function renderPage(total) {
        // console.log(total);
        laypage.render({
            elem: 'pageBox', //分页容器的id
            count: total, //数据总数，从服务端得到
            limit: query.pagesize, //每页显示几条数据
            curr: query.pagenum,
            layout: ["count", "limit", "prev", "page", "next", "skip"],
            limits: [8, 10, 15, 20],
            jump: function (obj, first) {
                // console.log(first);
                query.pagenum = obj.curr;
                query.pagesize = obj.limit;
                // 首行不执行
                if (!first) {
                    initDeviceList();
                }
            },

        });
    }
    //------------------------------------------------------------------------------
    // 调用渲染列表信息的函数
    initDeviceList();
    //------------------------------------------------------------------------------
    // 获取所有实验室的列表
    function initDeviceList() {
        var device_name = $('#form_search [name = device_name ]').val()
        var device_serial = $('#form_search [name = device_serial ]').val()
        var applicat_name = $('#form_search [name = applicat_name ]').val()
        // console.log(device_name);
        // console.log(device_serial);
        // console.log(applicat_name);
        query.device_name = device_name;
        query.device_serial = device_serial;
        query.applicat_name = applicat_name;
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/deviceList/',
            data: query,
            success: function (res) {
                // console.log(res);
                var htmStr = template('tpl_device_list', res);
                $('tbody').html(htmStr)
                renderPage(res.total)
            }
        })
    }
    //----------------------------------------------------------------
    //模糊搜索需要的信息
    $('#form_search').on('submit', function (e) {
        e.preventDefault()
        initDeviceList();
    })
    //----------------------------------------------------------------
    // 添加新dialog
    var addDevice_index = null;
    $('#addDevice').on('click', function () {
        addDevice_index = layer.open({
            type: 1,
            area: ['430px', ''],
            title: '添加分类名称',
            content: $('#tpl_add_device').html(),
            success: function () {
                initCateAndLab();
                form.render();
            }
        })
    })
    //   添加
    $('body').on('submit', '#form_addDevice', function (e) {
        e.preventDefault()
        var fd = new FormData($(this)[0]);
        // 渲染数据
        // fd.forEach(function (v, k) {
        //     console.log(k, v);
        // });
        $.ajax({
            method: 'POST',
            url: '/my/deviceManage/addDevice/',
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg(res.message);
                layer.close(addDevice_index);
            }
        })
        // ------------------------------------------------//
        // const table_data = $(this).serialize();
        // console.log(table_data);
        // $.ajax({
        //     method: 'POST',
        //     url: '/my/deviceManage/addDevice/',
        //     data: table_data,
        //     success: function (res) {
        //         if (res.status !== 0) {
        //             return layer.msg(res.message)
        //         }
        //         initDeviceList();
        //         layer.msg(res.message);
        //         layer.close(addDevice_index);
        //     }
        // })
    })

    //----------------------------------------------------------------
    // 根据id获取信息dialog
    var editDevice_index = null;
    $('tbody').on('click', '.btn_editDevice', function () {
        editDevice_index = layer.open({
            type: 1,
            area: ['400px', ''],
            title: '修改信息',
            content: $('#tpl_edit_device').html(),
            success: function () {
                form.render();
            }
        })
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/deviceList/' + id,
            success: function (response) {
                form.val('form_edit', response.data[0])
                initCateAndLab();
                form.render();
            }
        })
    })
    //----------------------------------------------------------------
    // 获取分类列表数据的方法
    function initCateAndLab() {
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/getcateAddLab/',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取分类数据失败！');
                }
                // 调用模板引擎渲染分类可选项
                var chtmlStr = template('tpl_add_device', res.dataCate);
                var lhtmlStr = template('tpl_add_device', res.dataLab);
                // console.log(chtmlStr);
                $('[name=device_cate_id]').html(chtmlStr);
                $('[name=lab_class_id]').html(lhtmlStr);
                // 通过 layui 重新渲染表单区域的UI结构
                form.render();
            }
        });
    }
    //----------------------------------------------------------------
    // 根据id修改信息
    $('body').on('submit', '#form_editDevice', function (e) {
        e.preventDefault();
        // const data = $(this).serialize();
        var fd = new FormData($(this)[0]);
        // fd.forEach(function (v, k) {
        //     console.log(k, v);
        // })
        $.ajax({
            method: 'POST',
            url: '/my/deviceManage/editDevice/',
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg(res.message);
                layer.close(editDevice_index);
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id审核申请
    $('tbody').on('click', '.btn_auditDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/auditDevice/' + id,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg('审核成功');
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id维修dialog
    var repairDevice_index = null;
    var repair_id = null;
    $('tbody').on('click', '.btn_repairDevice', function () {
        repairDevice_index = layer.open({
            type: 1,
            area: ['400px', ''],
            title: '维修原因',
            content: $('#tpl_repair_device').html(),
            success: function () {
                form.render();
            }
        })
        repair_id = $(this).attr('data_id');
    })
    // 根据id维修 
    $('body').on('submit', '#form_repairDevice', function (e) {
        e.preventDefault();
        // console.log('ok');
        // console.log("维修：" + repair_id);
        const repair_reason = $('#form_repairDevice [name=repair_reason]').val();
        // console.log(repair_reason);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/repairDevice/',
            data: {
                id: repair_id,
                repair_reason: repair_reason,
            },
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg('已维修');
                layer.close(repairDevice_index);
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id恢复使用
    $('tbody').on('click', '.btn_recoverDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log("恢复：" + id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/recoverDevice/' + id,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg('已恢复使用');
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id报废
    $('tbody').on('click', '.btn_deleteDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log(id);
        layer.confirm('确定报废此', {
            icon: 3,
            title: '提示'
        }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/my/deviceManage/deleteDevice/' + id,
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    initDeviceList();
                    layer.msg('报废成功');
                }
            })
            layer.close(index);
        });
    })
    //----------------------------------------------------------------
    // 根据id借用
    $('tbody').on('click', '.btn_applyDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/applyDevice/' + id,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg('借用成功');
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id审核借用
    $('tbody').on('click', '.btn_auditApplyDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/auditApplyDevice/' + id,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg(res.message);
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id归还
    $('tbody').on('click', '.btn_returnDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/returnDevice/' + id,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initDeviceList();
                layer.msg(res.message);
            }
        })
    })
    //----------------------------------------------------------------
    // 根据id查看图片
    $('tbody').on('click', '.btn_viewDevice', function () {
        // console.log('ok');
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/deviceManage/viewDevice/' + id,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                // layer.msg('获取图片成功');
                // console.log(res);
                var htmStr = template('tpl_view_device', res.data);
                // console.log(htmStr);
                $('[name="view_device').html(htmStr);
                // $('tbody').html(htmStr)
                // form.val('form_view', res.data[0])
            }
        })
        // var device = $('body #img')[0].src;

        // console.log(device);
        viewDevice_index = layer.open({
            type: 1,
            area: ['800px', '600px'],
            title: '查看图片',
            content: $('#tpl_view_device').html(),
            success: function () {
                form.render();
            }
        })

    })
})